<template>
  <Title>
    <template v-slot:center>商品详情</template>
  </Title>
  <div id="detail">
    <van-image width="100%" lazy-load :src="detail.cover_url"/>
    <van-card style="text-align: left" :num="detail.stock" :price="detail.price+'.00'"
      :desc="detail.description" :title="detail.title">
      <template #tags>
        <van-tag plain type="danger">新书</van-tag>
        <van-tag plain type="danger">推荐</van-tag>
      </template>
      <template #footer>
        <van-button  type="warning" @click="handleAddCart">加入购物车</van-button>
        <van-button  type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>
    <van-tabs v-model="active">
      <van-tab title="详情">
          <div class="content" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评">

      </van-tab>
      <van-tab title="相关图书">
        <GoodsList :goods="like_goods"></GoodsList>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {useRoute,useRouter} from "vue-router";
import {ref, onMounted, reactive,toRefs} from "vue";
import Title from "../../components/common/title/Title";
import {getDetail} from "../../network/detail";
import GoodsList from "../../components/content/goods/GoodsList";
import {addCart} from "../../network/cart";
import {Toast} from 'vant'
import router from "../../router";
import {useStore} from 'vuex'

export default {
  components: {Title,GoodsList},
  setup(){
    const store=useStore()
    let active=ref(0)
    const route=useRoute()
    let id=ref(0)
    let book=reactive({
      detail:{},
      like_goods:[],
      comments:[]
    })
    onMounted(()=>{
      id.value=route.query.id;
      getDetail(id.value).then(res=>{
        book.detail=res.goods;
        book.like_goods=res.like_goods;

      })
    })
    const handleAddCart=()=>{
      addCart({goods_id:book.detail.id,num:1}).then(res=>{
        if(res.status=='201' || res.status=='204'){
          Toast.success('添加成功')
          store.dispatch('updateCart')
        }
      })
    }
    const goToCart=()=>{
      addCart({goods_id:book.detail.id,num:1}).then(res=>{
        if(res.status=='201' || res.status=='204'){
          Toast.success('添加成功,显示购物车')
          store.dispatch('updateCart')
          router.push({path:'/shopcart'})
        }
      })
    }
    return{id,...toRefs(book),active,handleAddCart,goToCart}

  }

}
</script>


<style scoped lang="scss">
#detail{
  width: 100%;
  padding: 45px 0 50px;
  .content{
    width: 100%;
    padding: 5px;

  }
}
</style>
